<template>
    <div id="blog">
        <h1>{{blog.title}}<router-link :to="`/publishblog/${id}`">编辑博客</router-link></h1>
        <article>
            <p class="content">{{blog.content}}</p>
            <p>分类：</p>
            <ul>
                <li v-for="item in blog.class">{{item}}</li>
            </ul>
            <p class="author">发布者：{{blog.author}}</p>
        </article>
        <button @click="onDelete">删除博客</button>
    </div>
</template>

<script>
    export default {
        name: "Blog",
        data() {
            return {
                id: this.$route.params.id,
                blog: {}
            }
        },
        methods: {
            onDelete() {
                const query = Bmob.Query("Blog");
                query.destroy(this.id).then(response => this.$router.push({name: "Home"})).catch(error => console.log(error));
            }
        },
        created() {
            const query = Bmob.Query("Blog");
            query.get(this.id).then(response => this.blog = response).catch(error => console.log(error));
        }
    }
</script>

<style scoped>
    #blog {max-width: 960px;margin: 0 auto;padding: 20px;background-color: #eee;border: 1px dotted #aaa;}
    a {font-size: 14px;font-weight: normal;color: #444;vertical-align: bottom;float: right;}
    article {padding: 20px 10px;}
    .content, ul {border-bottom: 1px solid #ccc;padding-bottom: 20px;}
    article p:nth-child(2), article p:last-child {margin-top: 20px;}
    .author {font-size: 12px;}
    li {text-indent: 3em;list-style-type: none;}
    button {padding: 2px 10px;}
</style>